<template>
	<view class="total-bc">
		<view class="top">
			<view class="top-prompt">
				<text v-if="orderDetail.currentStatus === '未支付'">请尽快支付</text>
				<text v-if="orderDetail.currentStatus === '已支付'">订单已支付</text>
				<text v-if="orderDetail.currentStatus === '支付失败'">请尽快支付</text>
				<u-icon name="arrow-right" bold="true"></u-icon>
			</view>
			<view class="Jump-button" v-if="orderDetail.currentStatus === '未支付'">
				<u-button text="修改订单"  @tap="currentIndex = 0" :color="currentIndex === 0 ? 'red': ''"></u-button>
				<u-button text="立即支付"  @tap="toPayment" :color="currentIndex === 1 ? 'red': ''"></u-button>
				<u-button text="取消订单"  @tap="currentIndex = 2" :color="currentIndex === 2 ? 'red': ''"></u-button>
				<u-button text="联系商家"  @tap="currentIndex = 3" :color="currentIndex === 3 ? 'red': ''"></u-button>
			</view>
			
			<view class="Jump-button" v-if="orderDetail.currentStatus === '已支付'">
				<u-button text="联系商家"></u-button>
			</view>
			
		</view>
		<view v-if="currentIndex == 1">
			<view class="QR">
				<view class="QR-code">
					<image style="width: 200rpx;height: 200rpx;" src="../../../static/order/code.png"></image>
				</view>
			</view>

			<view class="middle-order clearfix">
				<view class="business-name">
					<text>{{ businessData.name}}</text>
				</view>
				<view class="List-of-orders" v-for="(item, index) in orderFoodImg" :key="item.id">
					<image :src="item.image" mode=""></image>
					<view class="orders">
						<view class="name-number">
							<text>{{ item.tasteName }}</text>
							<text>x{{ orderFoodNum[index].number }}</text>
						</view>
						<view class="price">
							<u-icon name="rmb"></u-icon>
							<text>{{ orderFoodNum[index].price }}</text>
						</view>
					</view>
				</view>
				<view class="t-p clearfix">
					<view class="total-price">
						<text>总计:</text>
						<view class="t-price">
							<u-icon name="rmb" bold="true" color="red"></u-icon>
							<text>{{ orderDetail.totalPrice }}</text>
						</view>
					</view>
				</view>

				<view class="business-Phone">
					<view class="business-phone">
						<u-icon name="phone"></u-icon>
						<text>致电商家</text>
					</view>
				</view>
			</view>

			<view class="Dining-information">
				<view class="dining-name">
					<text>就餐信息</text>
				</view>
				<view class="Pick-up-time">
					<text>自取时间</text>
					<text>{{ formatTime(orderDetail.createTime) }}</text>
				</view>
				<view class="Pick-up-address">
					<text>自取地址</text>
					<view class="address">
						<text>广西壮族自治区柳州市城中区高新南路17-27号</text>
					</view>
				</view>
			</view>

			<view class="Order-Information">
				<view class="order-information">
					<text>订单信息</text>
				</view>
				<view class="order-phone">
					<text>订单号码</text>
					<view class="order-copy">
						<text>{{ orderDetail.id }}</text>
						<view class="copy">
							复制
						</view>
					</view>
				</view>
				<view class="order-time">
					<text>下单时间</text>
					<text>{{ formatTime(orderDetail.createTime) }}</text>
				</view>
				<view class="order-time">
					<text>支付方式</text>
					<text>{{ orderDetail.payMethod }}</text>
				</view>
				<view class="remark">
					<text>备注</text>
				</view>
			</view>

		</view>

		<view v-if="currentIndex == 0">
			125546
		</view>
		<view class="" v-if="currentIndex == 2">
			26526
		</view>
		<view class="" v-if="currentIndex == 3">
			265264894
		</view>
	</view>
</template>

<script>
	import { byOrderId_OrderDetail, BusinessDetail, byOrderId_foodDetail, byOrderId_OrderNum } from '@/common/http.api.js'
	export default {
		data() {
			return {
				currentIndex: 1,
				orderId:'',
				orderDetail: {},
				businessData:{},
				orderFoodImg: [],
				orderFoodNum: []
			}
		},
		onLoad(id) {
			this.orderId = id.orderId
			console.log(this.orderId)
			
			//获取商家信息
			BusinessDetail().then( res => {
				this.businessData = res.rows[0]
			})
			
			//获取订单信息
			byOrderId_OrderDetail(this.orderId).then( res => {
				this.orderDetail = res.data
			})
			
			//获取订单中菜品的图片
			byOrderId_foodDetail(this.orderId).then( res => {
				this.orderFoodImg = res.rows
			})
			
			///获取订单中菜品的数量
			byOrderId_OrderNum(this.orderId).then( res => {
				this.orderFoodNum = res.rows
			})
			
		},
		methods: {
			toPayment(){
				this.currentIndex = 1
				uni.navigateTo({
					url: `/pagesA/home/closeAccount/closeAccount?orderId=${this.orderId}`
				})
			},
			formatTime(time) {
				const orderTime = time ? new Date(parseInt(time)) : new Date()
				const year = orderTime.getFullYear()
				const mm = (orderTime.getMonth() + 1) < 10 ? ('0' + (orderTime.getMonth() + 1)) : (orderTime.getMonth() + 1)
				const dd = orderTime.getDate() < 10 ? ('0' + orderTime.getDate()) : orderTime.getDate()
				const hh = orderTime.getHours() < 10 ? ('0' + orderTime.getHours()) : orderTime.getHours()
				const min = orderTime.getMinutes() < 10 ? ('0' + orderTime.getMinutes()) : orderTime.getMinutes()
				const ss = orderTime.getSeconds() < 10 ? ('0' + orderTime.getSeconds()) : orderTime.getSeconds()
				return `${year}-${mm}-${dd} ${hh}:${min}:${ss}`
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f8fc;
	}

	.total-bc {
		border: 1rpx solid #f7f8fc;
	}

	.top {
		border: 1rpx solid #fff;
		background-color: #fff;
	}

	.top .top-prompt {
		display: flex;
	}

	.top .top-prompt text {
		margin: 20rpx 20rpx;
		font-weight: bold;
		font-size: 38rpx;
	}

	.top .Jump-button {
		display: flex;
		font-size: 10rpx;
		margin: 20rpx 0;
	}

	.top .Jump-button .nav-actived {
		font-weight: bold;
		border-bottom: 3px solid orangered;
		
	}

	.top .Jump-button .u-button {
		width: 150rpx;
		height: 60rpx;
		color: black;
	}

	.QR {
		border: 1rpx solid #fff;
		background-color: #fff;
	}

	.QR-code {
		width: 200rpx;
		height: 200rpx;
		/* background-color: darkseagreen; */
		margin: 40rpx auto;
	}

	.middle-order {
		background-color: #fff;
		margin: 20rpx;
	}

	.middle-order .business-name {
		margin-left: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.middle-order .List-of-orders {
		display: flex;
		font-size: 28rpx;
	}

	.middle-order .List-of-orders .orders {
		display: flex;
		margin: 10rpx;
		justify-content: space-between;
		width: 80%;
	}

	.middle-order .List-of-orders image {
		height: 100rpx;
		width: 100rpx;
		border-radius: 10rpx;
		margin: 10rpx 10rpx 20rpx 20rpx;
	}

	.middle-order .List-of-orders .orders .name-number text {
		display: block;
	}

	.middle-order .List-of-orders .orders .price {
		display: flex;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.middle-order .t-p {
		width: 100%;
	}

	.middle-order .t-p .total-price {
		display: flex;
		float: right;
		margin-right: 20rpx;
		font-weight: bold;
	}

	.middle-order .t-p .total-price .t-price {
		display: flex;
		color: red;
	}

	.middle-order .business-Phone .business-phone {
		display: flex;
		width: 180rpx;
		margin: 40rpx auto;
	}

	.middle-order .business-Phone .business-phone text {
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.Dining-information {
		border: 1rpx solid #fff;
		height: 250rpx;
		margin: 20rpx;
		background-color: #fff;
	}

	.Dining-information .dining-name {
		margin-left: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.Dining-information .Pick-up-time {
		margin: 0 30rpx 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
		font-size: 25rpx;
	}

	.Dining-information .Pick-up-address {
		margin-left: 20rpx;
		margin-right: 10rpx;
		height: 60rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		font-size: 25rpx;
	}

	.Dining-information .Pick-up-address .address {
		width: 70%;
	}

	.Order-Information {
		margin: 20rpx;
		margin-bottom: 40rpx;
		border: 1rpx solid #fff;
		background-color: #fff;
	}

	.Order-Information .order-information {
		margin-left: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.Order-Information .order-phone {
		margin: 0 30rpx 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
		font-size: 25rpx;
	}

	.Order-Information .order-phone .order-copy {
		display: flex;
	}

	.Order-Information .order-phone .order-copy .copy {
		margin-left: 20rpx;
		/* border: 1rpx solid black; */

	}

	.Order-Information .order-time {
		margin: 0 30rpx 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
		font-size: 25rpx;
	}

	.Order-Information .remark {
		margin: 0 30rpx 40rpx 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 25rpx;
	}

	.clearfix::after {
		content: "";
		display: block;
		clear: both;
	}
</style>
